<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="lib/datepicker/skin/WdatePicker.css">
    <style>
        .wrap {
            width: 90%;
            margin: auto;
        }
        
        #newsdt {
            float: right;
        }
        
        #gjr {
            display: none;
        }
        
        #mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(204, 204, 204, .5);
            display: none;
        }
        
        #pop {
            padding: 20px 50px;
            width: 600px;
            background-color: #fff;
            border-radius: 10px;
            transform: translate(-50%, -50%);
            position: fixed;
            top: 50%;
            left: 50%;
            display: none;
        }
        
        .nan {
            margin-left: 17px;
        }
        
        .buut {
            float: right;
            margin-top: 20px;
        }
        
        .xian {
            margin-left: 17px;
        }
        
        #data-tuichu {
            cursor: pointer;
            color: #0000aa;
        }
        
        .tuichudneglu {
            font-size: 18px;
        }
        
        button:hover {
            transform: scale(1.1);
        }
    </style>

</head>

<body>
    <div class="wrap">
        <h2>学生信息管理系统</h2>
        <div class="tuichudneglu">
            <span id="data-namea"></span>
            <span id="data-typea"></span>:您好
            <span id="data-tuichu">[退出登陆]</span>
        </div>
        <hr>
        <button class="btn btn-primary" id="newsdt">+ 新增学生</button>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="data-wrap">


                <tr id="gjr">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-city"></td>
                    <td class="data-date"></td>
                    <td>
                        <button class="btn btn-primary data-edit bianji ">编辑</button>
                        <button class="btn btn-danger data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="mask"></div>
    <div id="pop">
        <h2 class="text">添加学生</h2>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline nan">
                                <input type="radio"  name="sex" id="nan" checked >男
                            </label>
                <label class="radio-inline">
                                <input type="radio" name="sex"  id="nv">女
                            </label>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" class="xian" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="input" class="form-control" id="data-date" placeholder="入学日期">
                </div>
            </div>

            <div class="form-group buut">
                <button id="submit" class="btn btn-primary text2">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>
    </div>
</body>
<script src="lib/jquery.min.js"></script>
<script src="lib/citys.js"></script>
<script src="lib/datepicker/wdatepicker.js"></script>
<script src="url.js"></script>

<script>
    //登陆验证
    //到这给页面之前先检查userInfo有没有东西
    let userInfo = sessionStorage.getItem("userInfo") || document.cookie.replace("userInfo=", ""); //userInfo干掉
    //如果没有
    if (!userInfo) {
        //转到登陆页面
        location.href = `${path}/denglu.html`
    }

    //用户信息展示和退出功能
    $("#data-namea").html(JSON.parse(userInfo)[0].name);
    $("#data-typea").html(JSON.parse(userInfo)[0].type ? "同学" : "老师"); //0是老师
    //退出
    $("#data-tuichu").click(function() {
        sessionStorage.removeItem("userInfo");
        document.cookie = "userInfo=xxx;expires=" + new Date("2020-1-1")
        location.href = `${path}/denglu.html`
    })


    let gjr = $("#gjr")

    //编辑
    $(".bianji").click(function() {

        $("#mask").fadeIn();
        $("#pop").fadeIn();
        $("#data-name").focus()
        $(".text").html("编辑信息")
        $(".text2").html("确认")

        let thisTr = $(this).closest("tr");
        $("#data-name").val(thisTr.find(".data-name").html())
        $("#data-age").val(thisTr.find(".data-age").html())

        let nanmix = thisTr.find(".data-sex").html()
        if (nanmix === "女") {
            $("#nv").prop("checked", true)
            $("#nan").prop("checked", false)
        }
        if (nanmix === "男") {
            $("#nv").prop("checked", false)
            $("#nan").prop("checked", true)
        }
        //地址
        $("#province").val() + $("#city").val() + $("#area").val()
        thisTr.find(".data-city").html()


        $("#data-date").val(thisTr.find(".data-date").html())



        //确认编辑加点击事件
        $(".text2").click(function() {
            $.ajax({
                url: `${path}/editStudent`,
                data: {
                    id: thisTr.find(".data-id").html(),
                    name: $("#data-name").val(),
                    age: $("#data-age").val(),
                    //判断是否是女的，是返回0不是返回1
                    sex: $("#nv")[0].checked ? 0 : 1,
                    //地址
                    city: $("#province").val() + $("#city").val() + $("#area").val(),
                    date: $("#data-date").val(),
                },
                success(data) {
                    if (data === "success") {
                        history.go(0);
                    } else {
                        alert("失败了")
                        console.log(data)
                    }
                }
            })

        })
    })

    //删除
    gjr.find(".data-delete").click(function() {
            //找到工具人的祖先元素tr
            let newtr = $(this).closest("tr");
            //用工具人的tr找到子孙元素的名字
            if (confirm(`真的要删除${newtr.find(".data-name").html()}同学嘛？此项操作不可逆！`)) {
                $.ajax({
                    url: `${path}/deleteStudent`,
                    data: {
                        id: $(this).closest("tr").find(".data-id").html()
                    },
                    success(data) {
                        if (data === "success") {
                            //淡出
                            newtr.fadeOut()
                        } else {
                            alert("删除失败")
                        }
                    }

                })
            }
        })
        // 确认添加
    $("#submit").click(function() {
        //名字和年龄,日期 不为空
        if ($("#data-name").val() && $("#data-age").val() && $("#data-data")) {
            $.ajax({
                url: `${path}/addStudent`,
                data: {
                    name: $("#data-name").val(),
                    age: $("#data-age").val(),
                    //判断是否是女的，是返回0不是返回1
                    sex: $("#nv")[0].checked ? 0 : 1,
                    //地址
                    city: $("#province").val() + $("#city").val() + $("#area").val(),
                    date: $("#data-date").val(),
                },
                success(data) {
                    if (data === "success") {
                        history.go(0);
                    } else {
                        alert("操作失败")
                    }
                }
            })
        }
    })
    window.onkeydown = function(event) {
        if (event.keyCode === 13) {
            $("#submit").click()
        }
        if (event.keyCode === 27) {
            $("#cancel").click()
        }
    }

    //新增
    $("#newsdt").click(function() {
        //淡出
        $("#mask").fadeIn();
        $("#pop").fadeIn();
        //弹出来给名字加鼠标焦点
        $("#data-name").focus();
    })
    $("#cancel").click(function() {
        $("#mask").fadeOut("fast");
        $("#pop").fadeOut("fast");
    })
    $("#data-date").click(function() {
        WdatePicker();
    })

    $.ajax({
        url: `${path}/studentList`,
        success(data) {
            let sdtList = JSON.parse(data);

            let tbody = $(".data-wrap");
            sdtList.forEach(item => {
                let newgjr = gjr.clone(true).attr("id", "");

                newgjr.find(".data-id").html(item.id);
                newgjr.find(".data-name").html(item.name)
                newgjr.find(".data-age").html(item.age)
                newgjr.find(".data-sex").html(Number(item.sex) ? "男" : "女")
                newgjr.find(".data-city").html(item.city)
                newgjr.find(".data-date").html(item.date)
                newgjr.appendTo(tbody)


            })

        }
    })


    let province = $("#province")
    let city = $("#city")
    let area = $("#area")

    citys.forEach(item => {
        let option = $(`<option>${item.provinceName}</option>`);
        province.append(option)
    })

    citys[0].mallCityList.forEach(item => {
        let option = $(`<option>${item.cityName}</option>`);
        city.append(option)
    })

    citys[0].mallCityList[0].mallAreaList.forEach(item => {
        let option = $(`<option>${item.areaName}</option>`);
        area.append(option)
    })

    province.change(function() {
        updataCity.call(this);
        updataArea.call(city[0]);
    })
    city.change(function() {
        updataArea.call(this)
    })

    function updataCity() {
        city.html("")
            // 返回当前选中的选择项在其select标签中的下标
        cityList = citys[this.selectedIndex].mallCityList;
        cityList.forEach(item => {
            let option = $(`<option>${item.cityName}</option>`);
            city.append(option)
        })
    }

    function updataArea() {
        area.html("")
        let areaList = cityList[this.selectedIndex].mallAreaList;
        areaList.forEach(item => {
            let option = $(`<option>${item.areaName}</option>`);
            area.append(option)
        })
    }
</script>

</html>